
<template>
  <view class="ai-page">
    <!-- 未打开摄像头时显示的识别按钮 -->
    <view v-if="!showCamera" class="ai-center">
      <button class="ai-btn" type="primary" @click="openCamera">拍照识别</button>
    </view>
    <!-- 打开摄像头后显示的拍照界面 -->
    <view v-else class="camera-wrap">
      <camera class="camera-view" device-position="back" flash="off" @error="onCameraError" ref="camera"></camera>
      <view class="camera-controls">
        <!-- 返回按钮 -->
        <button class="ctrl-btn" @click="closeCamera">返回</button>
        <!-- 拍照确认按钮 -->
        <button class="ctrl-btn primary" @click="takePhoto">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 是否显示摄像头界面
      showCamera: false,
      // 是否正在识别中，防止重复操作
      recognizing: false
    }
  },
  methods: {
    // 打开摄像头
    openCamera() {
      uni.showToast({ title: '打开摄像头', icon: 'none' });
      this.showCamera = true;
    },
    // 关闭摄像头并返回首页
    closeCamera() {
      this.showCamera = false;
      uni.switchTab({ url: '/pages/index/index' });
    },
    // 拍照并模拟AI识别，1秒后跳转到分馆详情页
    takePhoto() {
      if (this.recognizing) return;
      this.recognizing = true;
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          // 模拟1秒后识别出分馆
          setTimeout(() => {
            this.recognizing = false;
            // 随机跳转到场馆详情页（可替换为AI识别结果）
            const types = ['xingshi', 'wulong', 'longzhou'];
            const randomType = types[Math.floor(Math.random() * types.length)];
            uni.redirectTo({ url: `/pages/venue/index?type=${randomType}&page=0` });
          }, 1000);
        },
        fail: () => {
          this.recognizing = false;
          uni.showToast({ title: '拍照失败', icon: 'none' });
        }
      });
    },
    // 摄像头打开失败处理
    onCameraError(e) {
      uni.showToast({ title: '摄像头打开失败', icon: 'none' });
      this.showCamera = false;
    }
  }
}
</script>
<style scoped>
/* AI识别主页面布局 */
.ai-page {
  min-height: 100vh;
  background: #f7f3ef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 居中按钮区 */
.ai-center {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 识别按钮样式 */
.ai-btn {
  width: 320rpx;
  height: 88rpx;
  font-size: 36rpx;
  border-radius: 12rpx;
}
/* 摄像头包裹区 */
.camera-wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #000;
}
/* 摄像头预览区 */
.camera-view {
  width: 100vw;
  height: 100vh;
}
/* 摄像头控制按钮区域 */
.camera-controls {
  position: absolute;
  bottom: 80rpx;
  left: 0;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 20;
}
/* 控制按钮样式 */
.ctrl-btn {
  width: 120rpx;
  height: 80rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: rgba(255,255,255,0.9);
  border: 2rpx solid #ddd;
}
.ctrl-btn.primary {
  background: #27ae60;
  color: #fff;
  border-color: #27ae60;
}
</style> 
